<template>
  <el-row class="min-h-screen">
    <!-- 视频背景 -->
    <div class="video-background">
      <div class="video-overlay"><!-- 添加遮罩层 --></div>
      <!-- <video autoplay muted loop id="video">
        <source
          src="../../assets/video/50秒带你看大美中国瞬间.mp4"
          type="video/mp4"
        />
      </video> -->
    </div>
    <!-- <el-col :span="16"> </el-col> -->
    <el-col :span="7" class="login-background">
      <!-- <h1 class="text-3xl font-bold text-gray-800">智慧旅游系统登录</h1>
      <span class="my-5 font-semibold text-gray-400">账号密码登录</span> -->
      <div class="flex flex-col items-center justify-center">
        <div class="font-bold text-5xl text-[#6366F1] mb-4">
          智慧旅游推荐系统
        </div>
        <div class="text-light-50 font-bold mb-6 text-2xl text-[#6366F1]">
          （管理端）
        </div>
      </div>
      <el-form :model="form" class="w-[300px]" :rules="rules" ref="ruleFormRef">
        <el-form-item prop="username">
          <el-input
            style="height: 40px"
            v-model="form.username"
            placeholder="请输入账号"
          >
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            style="height: 40px"
            v-model="form.password"
            placeholder="请输入密码"
            type="password"
          >
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            round
            color="#6366F1"
            class="w-[250px] h-[40px] mx-auto"
            :loading="loading"
            @click="handleLogin(ruleFormRef)"
            >登 录
          </el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { validatePassword } from './rule'
import { loginApi } from '@/api/login.js'
import { useStore } from 'vuex'
import { ElLoading } from 'element-plus'
import { useRouter } from 'vue-router'

const form = ref({
  username: 'admin',
  password: 'admin'
})
// 表单校验
const ruleFormRef = ref()
const rules = reactive({
  username: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur'
    },
    { min: 3, max: 10, message: '用户名长度为3-10', trigger: 'change' }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    },
    {
      required: true,
      trigger: 'change',
      validator: validatePassword()
    }
  ]
})
// 登录按钮
const router = useRouter()
const loading = ref(false)
const store = useStore()
const openFullScreen1 = () => {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  setTimeout(() => {
    loading.close()
  }, 1000)
}
const handleLogin = async formEl => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true
      store
        .dispatch('user/loginAction', form.value)
        .then(() => {
          loading.value = false
          openFullScreen1()
          setInterval(() => {
            router.push('/')
            // TODO:登录操作
          }, 1000)
        })
        .catch(() => {
          loading.value = false
          // TODO:登录失败操作
        })
    }
  })
}
const resetForm = formEl => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style lang="scss" scoped>
.login-background {
  @apply flex flex-col items-center justify-center;
  height: 600px;
  margin: 15vh 68vw 0; /* 上外边距为 50vh，左右外边距自动 */
  background-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}
// 视频背景
.video-background {
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  z-index: -1;
  /* 遮罩层，目前未设置颜色 */
  .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    z-index: 1; /* 确保遮罩层在视频上方 */
  }
  #video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>
